<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    html,
    body {
      height: 100%;
    }

    body {
      margin: 0;
      overflow: hidden;
    }

    .sectionB {
      height: 100%;
      background-color: #041527;
    }

    .sectionB>.title-bg {
      width: 860px;
      height: 140px;
      background: url('images/hd_bg.png')no-repeat left bottom;
      margin: 0 auto;
    }

    .sectionB>.title-bg>.title {
      text-align: center;
      font-size: 60px;
      line-height: 100px;
      margin: 0;
      border-bottom: 4px solid white;
      font-weight: bolder;
      color: white;
    }

    .sectionB>.students {
      margin-top: 50px;
      display: flex;
      list-style: none;
      padding: 0;
      justify-content: space-around;
    }

    .sectionB>.students>li>div {
      width: 269px;
      height: 353px;
      background: url('images/box1_bg.jpg');
    }

    .sectionB>.students>li>div>h3 {
      font-size: 26px;
      color: skyblue;
      padding-left: 30px;
      padding-top: 20px;
      padding-bottom: 0;
      margin-bottom: 0;
    }

    .sectionB>.students>li>div>p {
      color: white;
      font-size: 20px;
      padding-left: 30px;
      margin-top: 5px;
    }

    .sectionB>.students>li>h4 {
      font-size: 24px;
      color: orange;
      text-align: center;
      margin: 0;
    }

    .sectionB>.students>li>p {
      /*font-size:20px;*/
      color: white;
      text-align: center;
      margin: 0;
    }
    /* 动画效果 */

    .sectionB>.title-bg {
      opacity: 0;
      transform: translateY(-100%);
      transition: all .5s;
    }

    .sectionB:hover>.title-bg {
      opacity: 1;
      transform: none;
    }

    .sectionB>.students>li {
      transform: translateY(200%);
      opacity: 0;
      transition: all .5s .5s;
    }

    .sectionB>.students>li:nth-child(2) {
      transition-delay: .7s;
    }

    .sectionB>.students>li:nth-child(3) {
      transition-delay: .9s;
    }

    .sectionB>.students>li:nth-child(4) {
      transition-delay: 1.1s;
    }
    .sectionB:hover>.students>li{
      transform: none;
      opacity: 1;
    }
    .sectionB>.students>li:hover>div{
      background: url('images/box1_bg.gif');
    }
  </style>
</head>

<body>
  <div class="sectionB">
    <div class="title-bg">
      <h2 class="title">为何那么多人选择前端 ?</h2>
    </div>
    <!--ul>li*4>.content>h3{我要就业}+p{大学毕业?<br>你也可以}^+h4{针对就业}+p{针对转行}-->
    <ul class='students'>
      <li>
        <div class="content">
          <h3>我要就业</h3>
          <p>大学毕业?<br>你也可以</p>
        </div>
        <h4>针对就业</h4>
        <p>学职业技能,从根本上解决毕业<br>就等于失业的困顿</p>
      </li>
      <li>
        <div class="content">
          <h3>我要就业</h3>
          <p>大学毕业?<br>你也可以</p>
        </div>
        <h4>针对就业</h4>
        <p>学职业技能,从根本上解决毕业<br>就等于失业的困顿</p>
      </li>
      <li>
        <div class="content">
          <h3>我要就业</h3>
          <p>大学毕业?<br>你也可以</p>
        </div>
        <h4>针对就业</h4>
        <p>学职业技能,从根本上解决毕业<br>就等于失业的困顿</p>
      </li>
      <li>
        <div class="content">
          <h3>我要就业</h3>
          <p>大学毕业?<br>你也可以</p>
        </div>
        <h4>针对就业</h4>
        <p>学职业技能,从根本上解决毕业<br>就等于失业的困顿</p>
      </li>
    </ul>
  </div>
</body>

</html>